<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类列表</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
        <i class="layui-icon layui-icon-refresh"></i>
        重载
    </button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.status == 1 ? 'true' : 'false' }}">
</script>

<script type="text/html" id="cate-icon">
    <img src="{{d['cate_icon']}}" style="max-width:32px;max-height:32px;" alt="" />
</script>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/common.js"></script>
<script>
    // 相关常量
    const PRIMARY_KEY = "id";
    const SELECT_API = "/app/admin/rl-goods-cate/select?limit=5000";
    const DELETE_API = "/app/admin/rl-goods-cate/delete";
    const UPDATE_API = "/app/admin/rl-goods-cate/update";
    const INSERT_URL = "/app/admin/rl-goods-cate/insert";
    const UPDATE_URL = "/app/admin/rl-goods-cate/update";
    layui.use(['table','form','jquery','treetable',"common","util","popup"],function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;
        let common = layui.common;
        let util = layui.util;

        treetable.render({
            treeColIndex: 1,
            treeIdName: 'id',
            treePidName: 'cate_id',
            skin:'line',
            treeDefaultClose: true,
            toolbar:'#power-toolbar',
            elem: '#power-table',
            url: SELECT_API,
            page: false,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'cate_title', minWidth: 200, title: '分类名称'},
                    {field: 'cate_icon', title: '分类图片',templet:'#cate-icon'},
                    {field: 'status', title: '是否可用',templet: function (d) {
                            let field = "status";
                            form.on("switch("+field+")", function (data) {
                                let load = layer.load();
                                let postData = {};
                                postData[field] = data.elem.checked ? 1 : 2;
                                postData[PRIMARY_KEY] = this.value;
                                $.post(UPDATE_API, postData, function (res) {
                                    layer.close(load);
                                    if (res.code) {
                                        return layui.popup.failure(res.msg, function () {
                                            data.elem.checked = !data.elem.checked;
                                            form.render();
                                        });
                                    }
                                    return layui.popup.success("操作成功");
                                })
                            });
                            let checked = d[field] === 1 ? "checked" : "";
                            return '<input type="checkbox" value="'+util.escape(d[PRIMARY_KEY])+'" lay-filter="'+util.escape(field)+'" lay-skin="switch" lay-text="'+util.escape('')+'" '+checked+'/>';
                        }
                    },
                    {field: 'cate_sort', title: '排序'},
                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
                ]
            ]
        });

        table.on('tool(power-table)',function(obj){
            if (obj.event === 'remove') {
                remove(obj);
            } else if (obj.event === 'edit') {
                edit(obj);
            }
        })

        table.on('toolbar(power-table)', function(obj){
            if(obj.event === 'add'){
                add();
            } else if(obj.event === 'refresh'){
                refresh();
            } else if(obj.event === 'reload'){
                treetable.reload("#power-table");
            }else if(obj.event === 'batchRemove'){
                batchRemove(obj);
            }
        });

        // 添加行
        let add = function() {
            layer.open({
                type: 2,
                title: "新增",
                shade: 0.1,
                area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"400px"],
                content: INSERT_URL
            });
        }

        // 编辑行
        let edit = function(obj) {
            let value = obj.data[PRIMARY_KEY];
            layer.open({
                type: 2,
                title: "修改",
                shade: 0.1,
                area: [common.isModile()?"100%":"520px", common.isModile()?"100%":"400px"],
                content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value
            });
        }

        // 删除行
        let remove = function(obj) {
            return doRemove(obj.data[PRIMARY_KEY], obj);
        }

        // 删除多行
        let batchRemove = function(obj) {
            let checkIds = common.checkField(obj, PRIMARY_KEY);
            if (checkIds === "") {
                layui.popup.warning("未选中数据");
                return false;
            }
            doRemove(checkIds.split(","));
        }

        // 执行删除
        let doRemove = function (ids, obj) {
            let data = {};
            data[PRIMARY_KEY] = ids;
            layer.confirm("确定删除?", {
                icon: 3,
                title: "提示"
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    data: data,
                    dataType: "json",
                    type: "post",
                    success: function(res) {
                        layer.close(loading);
                        if (res.code) {
                            return layui.popup.failure(res.msg);
                        }
                        return layui.popup.success("操作成功", function () {
                            return obj ? obj.del() : refreshTable();
                        });
                    }
                })
            });
        }

        // 刷新表格
        window.refreshTable = function(param) {
            treetable.reload("#data-table");
        }
    })
</script>
</body>
</html>